<template>
  <div class="apply">
    <div class="content-top">
      <span>调班调度管理</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left active">
      <div class="menu-item">
        <router-link to="/dispatch/quota">临时下班名额管理</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/dispatch/apply">临时下班申请管理</router-link>
      </div>
    </div>
    <!--右边内容-->
    <div class="content-right active">
      <div class="content-content">
        <el-tabs
          v-model="activeName"
          type="card"
          mode="horizontal"
          @tab-click="loadData"
        >
          <el-tab-pane label="我申请的" name="1" />
          <el-tab-pane label="我审批的" name="2" />
        </el-tabs>
        <div class="view-content">
          <div class="content-content-right">
            <!--我申请的 Apply-->
            <div v-if="activeName == 1" class="apply">
              <div class="content-head">
                <div class="input-item fl flex flex-y-center">
                  <span class="span-title fl">选择状态：</span>
                  <span class="span-input fl">
                    <el-select
                      v-model="Apply.tableConfig.params.auditStatus"
                      placeholder="请选择状态"
                    >
                      <el-option :value="-1" label="全部"></el-option>
                      <el-option label="未审核" value="0"></el-option>
                      <el-option label="审核通过" value="1"></el-option>
                      <el-option label="审核驳回" value="2"></el-option>
                    </el-select>
                  </span>
                </div>
                <div class="input-item fl flex flex-y-center">
                  <span class="span-title fl">日期：</span>
                  <span class="span-input fl">
                    <el-date-picker
                      v-model="Apply.tableConfig.paramsTmp.date"
                      format="yyyy-MM-dd HH:mm"
                      value-format="yyyy-MM-dd HH:mm"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </span>
                </div>

                <div class="input-item fl">
                  <span class="span-input fl">
                    <el-button
                      type="primary"
                      @click="
                        () => {
                          ;(Apply.isLoad = false), loadData()
                        }
                      "
                      >查询</el-button
                    >
                  </span>
                </div>
                <!-- <div class="input-item fr">
                                <span class="span-input fl">
                                    <el-button type="primary" @click="ApplyExport">导出</el-button>
                                </span>
                            </div> -->
                <div class="input-item fr">
                  <span class="span-input fl">
                    <el-button
                      type="primary"
                      style="background-color: rgb(153, 204, 0); color: rgb(255, 255, 255); border-color: rgb(153, 204, 0);"
                      @click="FnApply"
                      >申请</el-button
                    >
                  </span>
                </div>
              </div>

              <div class="content-table">
                <Table
                  ref="Table"
                  :atone="false"
                  :columns="Apply.tableConfig.columns"
                  :url="Apply.tableConfig.url"
                  :pparams="Apply.tableConfig.pparams"
                  @tableBubbling="TableBubbling"
                ></Table>
              </div>
            </div>

            <!--我审批的 Approval-->
            <div v-if="activeName == 2" class="approval">
              <div class="content-head">
                <div class="input-item fl flex flex-y-center">
                  <span class="span-title fl">选择状态：</span>
                  <span class="span-input fl">
                    <el-select
                      v-model="Approval.tableConfig.params.auditStatus"
                      placeholder="请选择状态"
                    >
                      <el-option :value="-1" label="全部"></el-option>
                      <el-option label="未审核" value="0"></el-option>
                      <el-option label="审核通过" value="1"></el-option>
                      <el-option label="审核驳回" value="2"></el-option>
                    </el-select>
                  </span>
                </div>
                <div class="input-item fl flex flex-y-center">
                  <span class="span-title fl">日期：</span>
                  <span class="span-input fl">
                    <el-date-picker
                      v-model="Approval.tableConfig.paramsTmp.date"
                      format="yyyy-MM-dd HH:mm"
                      value-format="yyyy-MM-dd HH:mm"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </span>
                </div>
                <div class="input-item fl">
                  <span class="span-input fl">
                    <el-button
                      type="primary"
                      @click="
                        () => {
                          ;(Approval.isLoad = false), loadData()
                        }
                      "
                      >查询</el-button
                    >
                  </span>
                </div>
                <!-- <div class="input-item fr">
                                <span class="span-input fl">
                                <el-button type="primary" @click="">导入</el-button>
                                </span>
                            </div> -->
                <!-- <div class="input-item fr">
                                <span class="span-input fl">
                                <el-button type="primary" @click="">导出</el-button>
                                </span>
                            </div> -->
              </div>
              <div class="content-table">
                <Table
                  ref="Table"
                  :atone="false"
                  :columns="Approval.tableConfig.columns"
                  :url="Approval.tableConfig.url"
                  :pparams="Approval.tableConfig.pparams"
                  @tableBubbling="TableBubbling"
                ></Table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--自定义弹窗 申请弹窗-->
    <el-dialog
      :title="mask1.title"
      :visible.sync="mask1.showMask"
      :width="mask1.width"
      :before-close="
        () => {
          handleClose('mask1')
        }
      "
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="true"
      center
    >
      <div :class="{flex: mask1.inline}" class="content body flex-wrap">
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">申请人</span>
            <span class="span-input">
              <el-input
                v-model="mask1.data.applyEmpName"
                :disabled="true"
                placeholder="请填写申请人"
              ></el-input>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">所在部门</span>
            <span class="span-input">
              <el-select
                v-model="mask1.data.deptId"
                placeholder="请填写所在部门"
                @change="departmentChange"
              >
                <el-option
                  v-for="item in mask1.deptIdOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">事由类型</span>
            <span class="span-input">
              <el-select
                v-model="mask1.data.typeId"
                placeholder="请选择事由类型"
                @change="FnTypeChange"
              >
                <el-option
                  v-for="item in leaveTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">班次</span>
            <span class="span-input">
              <el-select v-model="mask1.data.classId" placeholder="请填写班次">
                <el-option
                  v-for="item in mask1.shiftsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-start">
          <div class="flex flex-nowrap" style="width: 80%;">
            <span class="row-item-title">下班原因</span>
            <span class="span-input" style="width: 80%;">
              <el-input
                v-model="mask1.data.reason"
                placeholder="请填写下班原因"
                type="textarea"
                rows="3"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">开始时间</span>
            <span class="span-input">
              <el-date-picker
                v-model="mask1.data.a"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="请选择开始时间"
                @change="FnLoadTime"
              >
              </el-date-picker>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">结束时间</span>
            <span class="span-input">
              <el-date-picker
                v-model="mask1.data.b"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="请选择结束时间"
                @change="FnLoadTime"
              >
              </el-date-picker>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">审批人</span>
            <span class="span-input">
              <el-select
                v-model="mask1.data.auditId"
                placeholder="请选择审批人"
              >
                <el-option
                  v-for="item in approvalOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div
            v-if="mask1.data.restTimeStr"
            class="flex flex-nowrap flex-y-center"
          >
            <span class="row-item-title">剩余假期</span>
            <span class="span-input">
              <span>{{ mask1.data.restTimeStr }}</span>
            </span>
          </div>
          <div
            v-if="mask1.data.freeTime"
            class="flex flex-nowrap flex-y-center"
          >
            <span class="row-item-title">请假时长</span>
            <span class="span-input">
              <span style="color: #f55;">{{ mask1.data.freeTime }}</span>
              <span>小时</span>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title">是否使用剩余假期</span>
            <span class="span-input">
              <el-radio v-model="mask1.data.useFree" label="1">使用</el-radio>
              <el-radio v-model="mask1.data.useFree" label="0">不使用</el-radio>
            </span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer clearfix">
        <el-button @click="handleClose('mask1')">取 消</el-button>
        <el-button
          :loading="mask1.btnLoading"
          type="primary"
          @click="FnSaveApply"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--自定义弹窗 审批弹窗-->
    <el-dialog
      :title="mask2.title"
      :visible.sync="mask2.showMask"
      :width="mask2.width"
      :before-close="
        () => {
          handleClose('mask2')
        }
      "
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="true"
      center
    >
      <div :class="{flex: mask2.inline}" class="content body flex-wrap">
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">申请人</span>
            <span class="span-input">
              <el-input
                v-model="mask2.data.applyEmpName"
                :disabled="true"
                placeholder="请填写申请人"
              ></el-input>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">所在部门</span>
            <span class="span-input">
              <el-input
                v-model="mask2.data.deptName"
                :disabled="true"
                placeholder="请填写所在部门"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">事由类型</span>
            <span class="span-input">
              <el-input
                v-model="mask2.data.typeName"
                :disabled="true"
                placeholder="请填写事由类型"
              ></el-input>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">班次</span>
            <span class="span-input">
              <el-input
                v-model="mask2.data.className"
                :disabled="true"
                placeholder="请填写班次"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center" style="width: 60%;">
            <span class="row-item-title required">开始时间</span>
            <span class="span-input" style="width: 60%;">
              <el-date-picker
                :disabled="true"
                v-model="mask2.data.timeStart"
                :picker-options="pickerOptionsStart"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="选择日期"
              >
              </el-date-picker>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center" style="width: 60%;">
            <span class="row-item-title required">结束时间</span>
            <span class="span-input" style="width: 60%;">
              <el-date-picker
                :disabled="true"
                v-model="mask2.data.timeEnd"
                :picker-options="pickerOptionsEnd"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="选择日期"
              >
              </el-date-picker>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center" style="width: 80%;">
            <span class="row-item-title">临时下班名额</span>
            <span class="span-input" style="width: 70%;">
              <el-input
                v-model="mask2.data.places"
                :disabled="true"
                placeholder="请填临时下班名额"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">审批人</span>
            <span class="span-input">
              <el-input
                v-model="mask2.data.auditName"
                :disabled="true"
                placeholder="请填审批人"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap" style="width: 80%;">
            <span class="row-item-title">备注</span>
            <span class="span-input" style="width: 80%;">
              <el-input
                :disabled="true"
                v-model="mask2.data.remark"
                placeholder="请填写备注"
                type="textarea"
                rows="3"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap" style="width: 80%;">
            <span class="row-item-title">审批状态</span>
            <span class="span-input" style="width: 70%;">
              <el-select
                v-model="mask2.data.auditStatus"
                placeholder="请选择审批状态"
              >
                <el-option :value="1" label="审批通过"></el-option>
                <el-option :value="2" label="审批驳回"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap" style="width: 80%;">
            <span class="row-item-title">审批意见</span>
            <span class="span-input" style="width: 80%;">
              <el-input
                v-model="mask2.data.auditOption"
                placeholder="请填写审核意见"
                type="textarea"
                rows="3"
              ></el-input>
            </span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer clearfix">
        <el-button @click="handleClose('mask2')">取 消</el-button>
        <el-button
          :loading="mask2.btnLoading"
          type="primary"
          @click="FnSaveUpdate"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Table from '@/components/table.vue'
import Vmask from '@/components/vmask.vue'
import mixins from '@/const/mixins'
import {tmpApply} from '@/const/api'

export default {
  name: 'Apply',
  components: {
    Vmask,
    Table,
  },
  mixins: [mixins],
  data() {
    return {
      activeName: '1',
      Apply: {
        isLoad: false, // 是否加载过该容器的数据
        params: {},
        data5: [],
        tableConfig: {
          url: '/TemporaryWorkApply/getApplyList',
          columns: [
            {
              dataIndex: 'applyTime',
              format: 'date',
              title: '日期',
            },
            {
              dataIndex: 'className',
              title: '班次',
            },
            {
              dataIndex: 'deptName',
              title: '部门',
            },
            {
              dataIndex: 'places',
              title: '临时下班名额',
            },
            {
              type: 'meiju',
              dataIndex: 'auditStatus',
              title: '状态',
              meiju: {
                '0': '未审核',
                '1': '审核通过',
                '2': '审核驳回',
              },
            },
            {
              align: 'center',
              dataIndex: ['details'],
              title: '操作',
            },
          ],
          params: {
            auditStatus: -1,
            applyStatus: 1,
            date: '',
          },
          paramsTmp: {
            date: null,
          },
          pparams: {},
        },
      },
      Approval: {
        isLoad: false, // 是否加载过该容器的数据
        params: {},
        data5: [],
        tableConfig: {
          url: '/TemporaryWorkApply/getApplyList',
          columns: [
            {
              dataIndex: 'applyEmpName',
              title: '申请人',
            },
            {
              dataIndex: 'className',
              title: '班次',
            },
            {
              dataIndex: 'deptName',
              title: '部门',
            },
            {
              dataIndex: 'dateTimeStart',
              title: '开始时间',
            },
            {
              dataIndex: 'dateTimeEnd',
              title: '结束时间',
            },
            {
              dataIndex: 'typeName',
              title: '类型',
            },
            {
              dataIndex: 'reason',
              title: '下班原因',
            },
            {
              type: 'meiju',
              dataIndex: 'auditStatus',
              title: '状态',
              meiju: {
                '0': '未审核',
                '1': '审核通过',
                '2': '审核驳回',
              },
            },
            {
              align: 'center',
              dataIndex: ['approval'],
              title: '操作',
            },
          ],
          params: {
            date: null,
            auditStatus: -1,
            applyStatus: 1,
          },
          paramsTmp: {
            date: null,
          },
          pparams: {},
        },
      },
      // 申请
      mask1: {
        title: '',
        showMask: false,
        data: {
          applyEmpName: '', // 申请人
        },
        width: '42%',
        btnLoading: false,
      },
      mask2: {
        title: '',
        showMask: false,
        data: {
          applyEmpName: '', // 申请人
        },
        width: '42%',
        btnLoading: false,
      },
      containerArr: ['Apply', 'Approval'],
      leaveTypeOptions: [],
      departmentOptions: [],
      typesOptions: [],
      statusOptions: [],
      causeOptions: [],
      approvalOptions: [],
      checkOptions: [],
      CCOptions: [],
      AllOption: [],
      auditOptions: [],
      restTime: [],
      timeStart: new Date(),
      pickerOptionsStart: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        },
      },
      pickerOptionsEnd: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        },
      },
    }
  },
  computed: {
    user() {
      return this.$store.state
    },
  },
  created() {
    window._this = this

    this.getRestTime(123) // 获取申请人假期
    this.getYear(new Date().getFullYear()) // 获取当年假期列表

    this.getDepartmentList(0) // 获取部门列表
    this.getLeaveTypeList(0) // 获取事由类型列表
    this.getEmployeeVo(1, 2) // 获取登录人所在部门的审批人列表
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      // 根1据activeName加载对应tab数据
      let activeName = this.activeName
      let workerNo = this.user.workNumber
      let container = (this.container = this[
        this.containerArr[activeName * 1 - 1]
      ]) // 拿 tab con 进行操作
      let paramsTmp = this.container.tableConfig.paramsTmp
      container.tableConfig.pparams = JSON.parse(
        JSON.stringify(container.tableConfig.params),
      )

      delete container.tableConfig.pparams.applyEmpId // 删除申请人工号
      delete container.tableConfig.pparams.auditId // 删除审核人工号

      paramsTmp.date
        ? (container.tableConfig.pparams.applyStartTime = this.$utils.parseTime(
            paramsTmp.date[0],
          ))
        : (container.tableConfig.pparams.applyStartTime = null)
      paramsTmp.date
        ? (container.tableConfig.pparams.applyEndTime = this.$utils.parseTime(
            paramsTmp.date[1],
          ))
        : (container.tableConfig.pparams.applyEndTime = null)
      container.tableConfig.pparams.pageNum = 1

      console.log(activeName, 'activeName')
      if (activeName == 1 && !this.container.isLoad) {
        // 我申请的
        container.tableConfig.pparams.applyEmpId = workerNo
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      } else if (activeName == 2 && !this.container.isLoad) {
        // 我审批的
        container.tableConfig.pparams.auditId = workerNo
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      }
    },
    async TableBubbling(e) {
      console.log(e, 'content')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask
      if (type == 'delete') {
        let {state, data, msg} = await this.$axios.$get(
          tmpApply('delApplyById'),
          {params: {id: content.id}},
        )
        if (state == this.ResCode) {
          setTimeout(() => {
            this.$refs['Table'].fetchList()
          }, 100)
          this.$Message.success('删除成功')
        } else {
          this.$Message.error(msg)
        }
      } else if (type == 'approval') {
        mask = this.mask2
        mask.showMask = true
        mask.title = '临时下班审批'
        mask.data = JSON.parse(JSON.stringify(content))
        mask.data.timeStart = content.dateTimeStart
        mask.data.timeEnd = content.dateTimeEnd
        mask.data.checkNo = ''
        mask.data.checkName = ''
        mask.data.auditStatus =
          mask.data.auditStatus == 0 ? 1 : mask.data.auditStatus
      } else if (type == 'details') {
        this.container.isDetail = true
        mask = this.mask1
        mask.showMask = true
        mask.title = '查看'
        mask.data = JSON.parse(JSON.stringify(content))
        mask.data.timeStart = content.dateTimeStart
        mask.data.timeEnd = content.dateTimeEnd
      }
    },
    FnMask(e) {
      console.log(e, 'e')
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'cancel') {
        mask.showMask = false
      }
    },
    handleClose(key) {
      this[key].showMask = false
    },
    async FnApply() {
      let mask = this.mask1
      this.container.isDetail = false
      mask.showMask = true
      mask.title = '临时下班申请'
      mask.data = {
        applyEmpName: this.user.username, // 申请人
        deptId: '', // 部门id
        classId: '', // 班次id
        typeId: '', // 事由类型id
        timeStart: '', // 开始时间
        timeEnd: '', // 结束时间
        places: '', // 临时下班原因
        auditId: '', // 审批人
        remark: '', // 备注
        freeTime: '',
        restTimeStr: '',
        useFree: '0',
      }
    },
    async FnSaveApply() {
      let timeStart = this.timeStart
      let timeEnd = new Date()

      if (timeEnd - timeStart >= 1500) {
        // 防止频繁操作
        this.timeStart = timeEnd
        let params = JSON.parse(JSON.stringify(this.mask1.data))
        let originData = this.mask1.data

        params.dayStart = this.$utils.parseTime(params.a)
        params.timeStart = this.$utils.parseTime(params.a)
        params.dayEnd = this.$utils.parseTime(params.b)
        params.timeEnd = this.$utils.parseTime(params.b)
        params.applyStatus = 1
        params.dayStart = new Date(params.dayStart)
        params.dayEnd = new Date(params.dayEnd)

        if (!params.timeStart && !params.dayStart)
          return this.$Message.error('请填写开始时间')
        if (!params.timeEnd && !params.dayEnd)
          return this.$Message.error('请填写结束时间')
        if (!params.applyEmpName) return this.$Message.error('请填写申请人')
        if (!params.deptId) return this.$Message.error('请填写部门')
        if (!params.typeId) return this.$Message.error('请填写事由类型')
        if (!params.classId) return this.$Message.error('请填写班次')
        if (params.dayEnd - params.dayStart < 0)
          return this.$Message.error('开始时间大于结束时间')
        if (params.dayEnd - params.dayStart == 0)
          return this.$Message.error('开始时间不能等于结束时间')
        if (!params.auditId) return this.$Message.error('请填写审批人')

        params.applyEmpId = this.user.workNumber
        this.mask1.btnLoading = true
        let {state, data, msg} = await this.$axios.$get(
          tmpApply('addOrUpdateApply'),
          {params: params},
        )
        if (state == this.ResCode) {
          setTimeout(() => {
            this.$refs['Table'].fetchList()
          }, 100)
          this.$Message.success('保存成功')
          this.mask1.data = {}
          this.mask1.shiftsOptions = []
        } else {
          this.$Message.error(msg)
        }
        this.mask1.showMask = false
        this.mask1.btnLoading = false
      }
    },
    async FnSaveUpdate() {
      let timeStart = this.timeStart
      let timeEnd = new Date()
      if (timeEnd - timeStart >= 1500) {
        this.timeStart = timeEnd
        let params = JSON.parse(JSON.stringify(this.mask2.data))
        if (params.auditOption) return this.$Message.error('请填写审批意见')
        params.dayStart = this.$utils.parseTime(params.timeStart)
        params.timeStart = this.$utils.parseTime(params.timeStart)
        params.dayEnd = this.$utils.parseTime(params.timeEnd)
        params.timeEnd = this.$utils.parseTime(params.timeEnd)
        delete params.applyTime
        delete params.auditTime
        let {state, data, msg} = await this.$axios.$get(
          tmpApply('addOrUpdateApply'),
          {params: params},
        )
        if (state == this.ResCode) {
          setTimeout(() => {
            this.$refs['Table'].fetchList()
          }, 100)
          this.$Message.success('保存成功')
          this.mask2.showMask = false
          this.mask2.data = {}
        } else {
          this.$Message.success(msg)
        }
      }
    },
    FnDelete() {},
    ApplyExport() {
      let params = JSON.parse(
        JSON.stringify(this.container.tableConfig.pparams),
      )

      window.open(
        `${this.EXPORTURL}/TemporaryWorkApply/exportApply?applyStartTime=${
          params.date[0] ? this.$utils.parseTime(params.date[0]) : null
        }&applyEndTime=${
          params.date[1] ? this.$utils.parseTime(params.date[1]) : null
        }&applyEmpId=100&auditStatus=${
          params.auditStatus ? params.auditStatus : null
        }`,
      )
    },
    departmentChange(e) {
      this.mask1.data.classId = ''
      this.mask1.data.auditId = ''
      this.getShiftsList(e)
      this.getEmployeeVo(e, 1) // 获取临时下班名额
    },
    // 计算请假时长
    FnLoadTime() {
      setTimeout(() => {
        let data = JSON.parse(JSON.stringify(this.mask1.data))
        let hours = 0
        let holiday = 0
        if (data.a && data.b) {
          data.a = new Date(data.a)
          data.b = new Date(data.b)
          let startTime = new Date(
            new Date(data.a).toLocaleDateString(),
          ).getTime()
          let endTime = new Date(
            new Date(data.b).toLocaleDateString(),
          ).getTime()

          data.a.getHours() <= 9 && data.a.setHours(9)
          data.b.getHours() <= 9 && data.b.setHours(18)
          let obj = this.$utils.getTotal(
            this.$utils.parseTime(data.a),
            this.$utils.parseTime(data.b),
            9,
            18,
            true,
            12,
            12,
          )
          if (!obj) return this.$Message.error('请假结束日期小于开始日期')
          while (startTime <= endTime) {
            console.log(
              startTime,
              new Date(startTime).toLocaleDateString(),
              'test',
            )
            if (
              this.holidayList.some((n1, i1) => {
                return (
                  new Date(n1.dateTime).toLocaleDateString() ==
                  new Date(startTime).toLocaleDateString()
                )
              })
            ) {
              obj.days -= 1
            }
            startTime += 24 * 60 * 60 * 1000 * 1
          }
          this.mask1.data.freeTime = obj.days * 9 + obj.hours * 1
        }
      }, 80)
    },
    // ...mapActions([''])
  },
}
</script>

<style lang="less">
.apply {
  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }

  .row-item {
    padding-bottom: 14px;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
    }

    & > div {
      margin-right: 14px;

      &:last-child {
        margin-right: 0;
      }
    }

    .el-upload-list--picture-card .el-upload-list__item-actions span + span {
      margin-left: 2px;
    }

    .el-upload--picture-card {
      width: 100px !important;
      height: 100px !important;
      line-height: 108px !important;
    }

    .el-upload-list__item {
      width: 100px !important;
      height: 100px !important;
      line-height: 50px !important;
    }

    .file-name {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .row-item-title {
    box-sizing: border-box;
    position: relative;
    padding-right: 5px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &::after {
      content: ':';
      font-weight: bold;
    }

    &.required::before {
      content: '*';
      font-weight: bold;
      color: red;
    }
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
}
</style>
